<!-- 我的 -->
<template>
  <view class="container">
    <!-- 用户信息区 -->
    <view class="user-info">
      <view class="user-header">
        <view class="avatar-wrap">
          <image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill" />
          <view class="vip-tag">VIP</view>
        </view>
        <view class="user-detail">
          <text class="username">{{ userInfo.username }}</text>
          <text class="member-level">{{ userInfo.memberLevel }}</text>
        </view>
        <view class="setting">
          <uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
        </view>
      </view>
      <view class="user-assets">
        <view class="asset-item">
          <text class="asset-value">{{ userInfo.points }}</text>
          <text class="asset-label">积分</text>
        </view>
        <view class="asset-item">
          <text class="asset-value">￥{{ userInfo.balance.toFixed(2) }}</text>
          <text class="asset-label">余额</text>
        </view>
      </view>
    </view>

    <!-- 会员服务区 -->
    <scroll-view class="member-services" scroll-x>
      <view class="service-cards">
        <view class="service-card" v-for="(service, index) in memberServices" :key="index">
          <image class="service-icon" :src="service.icon" mode="aspectFit" />
          <text class="service-name">{{ service.name }}</text>
          <text class="service-desc">{{ service.desc }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 功能模块区 -->
    <view class="function-grid">
      <view class="function-item" v-for="(func, index) in functions" :key="index" @click="handleFunctionClick(func)">
        <uni-icons :type="func.icon" size="32" color="#8B5C3E"></uni-icons>
        <text class="function-name">{{ func.name }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

interface UserInfo {
  avatarUrl: string;
  username: string;
  memberLevel: string;
  points: number;
  balance: number;
}

interface MemberService {
  name: string;
  desc: string;
  icon: string;
}

interface FunctionItem {
  name: string;
  icon: string;
  path?: string; // 新增path属性
}

const userInfo = ref<UserInfo>({
  avatarUrl: '',
  username: '',
  memberLevel: '',
  points: 0,
  balance: 0
});

const memberServices = ref<MemberService[]>([]);
const functions = ref<FunctionItem[]>([]);

// 获取用户数据
const fetchUserData = async () => {
  try {
    // 获取用户信息
    const userRes = await uni.request({
      url: 'http://localhost:3000/userInfo',
      method: 'GET'
    });
    userInfo.value = userRes.data;
    
    // 获取会员服务
    const servicesRes = await uni.request({
      url: 'http://localhost:3000/memberServices',
      method: 'GET'
    });
    memberServices.value = servicesRes.data;
    
    // 获取功能列表
    const funcRes = await uni.request({
      url: 'http://localhost:3000/functions',
      method: 'GET'
    });
    // 为功能项添加路径信息
    functions.value = funcRes.data.map(item => {
      if (item.name === '订单管理') {
        return { ...item, path: '/pages/Todingdan/Todingdan' };
      }
      return item;
    });
    
  } catch (error) {
    console.error('获取数据失败:', error);
    uni.showToast({
      title: '数据加载失败',
      icon: 'none'
    });
  }
};

// 处理功能点击
const handleFunctionClick = (func: FunctionItem) => {
  if (func.path) {
    uni.navigateTo({
      url: func.path
    });
  } else {
    uni.showToast({
      title: `${func.name}功能`,
      icon: 'none'
    });
  }
};

onMounted(() => {
  fetchUserData();
});
</script>

<style>
/* 保持原有的样式不变 */
page {
  height: 100%;
  background-color: #f5f5f5;
}

.container {
  min-height: 100%;
  padding-bottom: 80rpx; /* 根据你的tabbar高度调整 */
  background-color: #f5f5f5;
}

.user-info {
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, #8B5C3E 0%, #D4A373 100%);
  color: #ffffff;
}

.user-header {
  display: flex;
  align-items: center;
  position: relative;
}

.avatar-wrap {
  position: relative;
  margin-right: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid #ffffff;
}

.vip-tag {
  position: absolute;
  bottom: -6rpx;
  right: -6rpx;
  background-color: #FFD700;
  color: #8B5C3E;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: bold;
}

.user-detail {
  flex: 1;
}

.username {
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.member-level {
  font-size: 14px;
  opacity: 0.9;
}

.setting {
  padding: 20rpx;
}

.user-assets {
  display: flex;
  margin-top: 40rpx;
}

.asset-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.asset-value {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.asset-label {
  font-size: 14px;
  opacity: 0.9;
}

.member-services {
  margin: 20rpx 0;
  padding: 0 30rpx;
  overflow: auto;
}

.service-cards {
  display: flex;
  padding: 10rpx 0;
}

.service-card {
  flex-shrink: 0;
  width: 200rpx;
  height: 240rpx;
  background: #ffffff;
  margin-right: 20rpx;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.service-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 20rpx;
}

.service-name {
  font-size: 16px;
  color: #333333;
  margin-bottom: 8rpx;
}

.service-desc {
  font-size: 12px;
  color: #999999;
}

.function-grid {
  padding: 20rpx 30rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin: 0 30rpx;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.function-name {
  margin-top: 16rpx;
  font-size: 14px;
  color: #333333;
}
</style>